<template>
<!--  面包屑-->
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">货物信息</a></el-breadcrumb-item>
      <el-breadcrumb-item>货物信息(1)</el-breadcrumb-item>
    </el-breadcrumb>
<!--    引入的表格组件-->
    <div class="goodsform">
      <GoodsForm :page-data="pageData"
                 @handleEdit="handleEdit"
                 @handlePageChange="handlePageChange"
                 :total-data="$store.state.tableData" @deleteRow="deleteGoodsInfo">
        <div slot="dialog">
        <!--    修改货物的弹出框-->
        <el-dialog title="修改货物信息" :visible.sync="dialogFormVisible">
          <el-form :model="goods">
            <el-form-item label="货物名称" :label-width="formLabelWidth">
              <el-input v-model="goods.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="货物数量" :label-width="formLabelWidth">
              <el-input type="number" v-model="goods.count">
              </el-input>
            </el-form-item>
            <el-form-item label="货物重量" :label-width="formLabelWidth">
              <el-input type="text" v-model="goods.weight">
              </el-input>
            </el-form-item>
            <el-form-item label="货物种类" :label-width="formLabelWidth">
              <el-input type="text" v-model="goods.category">
              </el-input>
            </el-form-item>
            <el-form-item label="入库时间" :label-width="formLabelWidth">
              <el-input type="date" v-model="goods.date">
              </el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input type="text" v-model="goods.note">
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleChange">确 定</el-button>
          </div>
        </el-dialog>
        </div>
      </GoodsForm>
    </div>
  </div>
</template>

<script>
import GoodsForm from "@/components/goods/childComps/GoodsForm";

export default {
  name: "GoodsInfo",
  components: {
    GoodsForm
  },
  data() {
    return {
      formLabelWidth: '180px',
      dialogFormVisible: false,
      goods: {},
      curIndex: 0,
      pageData: [],
      pageSize: 0,
      curPage: 0
    }
  },
  created() {
    console.log('test 我是飞哥哥~~~')
    this.handlePageChange({curPage:1,pageSize:5})
  },
  methods: {
    handleEdit(data) {
      this.dialogFormVisible = true;
      this.curIndex = data.index;
      this.goods = JSON.parse(JSON.stringify(data.row[data.index]))
    },
    handleChange() {
      this.dialogFormVisible = false
      this.$store.commit('changeGoodsInfo',{
        curIndex:this.curIndex,
        goods: this.goods
      })
      this.pageData =  this.$store.getters.showDataByPage({
        pageSize: this.pageSize,
        curPage: this.curPage
      })
      // this.$set(this.$store.state.tableData, this.curIndex, this.goods)
    },
    handlePageChange(data) {
      this.pageSize = data.pageSize
      this.curPage = data.curPage
      this.pageData =  this.$store.getters.showDataByPage({
        pageSize: this.pageSize,
        curPage: this.curPage
      })
    },
    deleteGoodsInfo(data) {
      this.$store.commit('deleteGoodsInfo',data)
      this.pageData =  this.$store.getters.showDataByPage({
        pageSize: this.pageSize,
        curPage: this.curPage
      })
    }
  },


}

</script>

<style scoped>
.goodsform{
  margin-top: 30px;
}
</style>